<template>
  <div class="my-certificate-apply">
    <Crumbs title="开发者认证流转" />
    <div class="main">
      <div class="title-info">工单详情</div>
      <el-row>
        <el-form
          :inline="true"
          :model="application"
          size="small"
          :rules="applicationroles"
          ref="applicationref"
        >
          <el-form-item label="工单类型" prop="orderType">
            <el-select
              v-model="application.orderType"
              placeholder="工单类型"
              :disabled="operationFlat==true?false:true"
            >
              <el-option label="开发者认证" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工单描述" prop="orderDesc">
            <el-input
              v-model="application.orderDesc"
              placeholder="工单描述"
              :disabled="operationFlat==true?false:true"
            ></el-input>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-select
              v-model="application.priority"
              placeholder="优先级"
              :disabled="operationFlat==true?false:true"
            >
              <el-option label="紧急" value="0"></el-option>
              <el-option label="高" value="1"></el-option>
              <el-option label="中" value="2"></el-option>
              <el-option label="低" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截止日期" prop="endDate">
            <el-date-picker
              v-model="application.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择时间"
              :disabled="operationFlat==true?false:true"
            />
          </el-form-item>
        </el-form>
      </el-row>
      <div>
        <el-button type="primary" size="small" @click="batchdelete" v-if="operationFlat"
          >批量删除</el-button
        >
      </div>
      <div class="title-info">开发者认证材料列表</div>
      <el-row>
        <el-table :data="fileInfoList" ref="tableref">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="docName" label="资料名称" />
          <el-table-column prop="required" label="是否必传">
            <!-- <template slot-scope="scope">
              {{ scope.row.required ? '是' : '否' }}
            </template> -->
          </el-table-column>
          <el-table-column prop="fileSize" label="资料大小" />
          <el-table-column prop="fileDesc" label="资料描述" />

          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.remark }}
              <!-- <el-link type="primary">{{ scope.row.remark }}</el-link> &nbsp; -->
            </template>
          </el-table-column>
          <el-table-column label="操作"  >
            <template slot-scope="scope">
              <el-button type="text" @click="uploadbtn(scope.row, scope.$index)"  v-if="operationFlat"
                >上传文件</el-button
              >
              <el-button type="text" @click="deleteupload(scope.$index)"  v-if="operationFlat"
                >删除</el-button
              >
              <a :href="'/api/file/info/download/'+downloadId" download="" style="margin-left:10px"><el-button type="text"  @click="download(scope.row)" v-if="scope.row.filePath">下载</el-button></a>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <br />
      <div class="title-info">工单流转轨迹</div>
      <el-row>
        <el-table
          :data="tableData2"
          stripe
          :header-cell-style="{ backgroundColor: '#FAFAFA' }"
        >
          <el-table-column prop="createBy" label="处理人" />
          <el-table-column prop="createdTime" label="处理时间" />
          <el-table-column prop="operType" label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.operType === '1'">回复</span>
              <span v-if="scope.row.operType === '2'">转派</span>
              <span v-if="scope.row.operType === '3'">关闭</span>
            </template>
          </el-table-column>
          <el-table-column prop="operOpinions" label="操作意见" />
        </el-table>
      </el-row>
      <br />
      <div v-if="operation == '2'">
        <div class="title-info">工单操作</div>
        <el-form
          :model="roamformInline"
          label-width="80px"
          :rules="roamrules"
          ref="roamdialog"
        >
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="操作类型" prop="operType">
                <el-select
                  v-model="roamformInline.operType"
                  style="width: 350px"
                  placeholder=""
                  clearable
                  @change="opachange"
                >
                  <el-option label="回复" value="1"></el-option>
                  <el-option label="转派" value="2" v-if="deleteflat==false"></el-option>
                  <el-option label="关闭" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="转派角色" prop="character">
                <el-select
                  v-model="roamformInline.character"
                  style="width: 350px"
                  placeholder=""
                  clearable
                  :disabled="reassignment"
                  @change="characterchange"
                >
                  <el-option
                    v-for="item in characteroptions"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="转派用户" prop="roleId">
                <el-select
                  v-model="roamformInline.roleId"
                  style="width: 350px"
                  placeholder=""
                  clearable
                  :disabled="reassignment"
                >
                  <el-option
                    v-for="item in roleIdoptions"
                    :key="item.optionValue"
                    :label="item.optionText"
                    :value="item.optionValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <br />
          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="操作意见" prop="operOpinions">
                <el-input
                  type="textarea"
                  style="width: 1000px"
                  v-model.trim="roamformInline.operOpinions"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-row type="flex" justify="center">
        <el-button size="small" @click="$router.push('/devWorkOrderManagement')"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </div>
  
    <!-- 上传文件的dialog -->
    <div>
      <el-dialog
        title="资料上传"
        :visible.sync="uploaddialogVisible"
        width="30%"
        @close="resetForm('uploadref')"
      >
        <el-form ref="uploadref" :model="uploadform" label-width="80px">
          <el-form-item label="资料名称" prop="docName">
            <el-input v-model="uploadform.docName" disabled></el-input>
          </el-form-item>
          <el-form-item label="资料描述" prop="fileDesc">
            <el-input
              v-model="uploadform.fileDesc"
              placeholder="输入资料描述"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="19"
              ><el-form-item label="上传文件" prop="newName">
                <el-input
                  v-model="uploadform.newName"
                  placeholder=""
                  disabled
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="5">
              <el-form-item label-width="0" prop="filePath">
                <el-upload
                  v-model="uploadform.filePath"
                  class="upload-demo"
                  action="/api/file/info/addWork"
                  multiple
                  :show-file-list="false"
                  :on-success="uploadsuccess"
                >
                  <el-button size="" type="primary">选择</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="uploadform.remark"
              placeholder="输入备注"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              indexid = ''
              uploaddialogVisible = false
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="uploadsub">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      deleteflat:true,
      operationFlat:false,
      //  下载地址
      downloadId:'',
      indexid: '',
      characteroptions: [],
      uploadform: {
        docName: '',
        fileDesc: '',
        remark: '',
        newName: '',
        filePath: '',
        fileSize: ''
      },
      uploaddialogVisible: false,
      applicationroles: {
        orderType: [
          { required: true, message: '请选择工单类型', trigger: 'change' },
        ],
        orderDesc: [
          { required: true, message: '请输入工单描述', trigger: 'change' },
        ],
        priority: [
          { required: true, message: '请选择优先级', trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请选择截止日期', trigger: 'change' },
        ]
      },
      orderNo: '',
      roamformInline: {
        operType: '',
        character: '',
        roleId: '',
        operOpinions: '',
      },
      application: {
        orderType: '',
        orderDesc: '',
        priority: '',
        endDate: '',
      },
      fileInfoList: [],
      tableData2: [],
      roamrules: {
        operType: [
          { required: true, message: '请选择操作类型', trigger: 'change' },
        ],
        character: [
          { required: false, message: '请选择转派角色', trigger: 'change' },
        ],
        roleId: [
          { required: false, message: '请选择转派用户', trigger: 'change' },
        ],
        operOpinions: [
          { required: true, message: '请输入操作意见', trigger: 'change' },
          {  max: 200, message: '长度应在200字符内', trigger: 'change' }
        ],
      },
      roleIdoptions: [],
      operation: '',
      // 转派的控制
      reassignment:true
    }
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.getdata()
    this.getselect()
    console.log(this.orderNo)
    console.log(this.$store.state.loginUser,'userFlag')
    //  if(this.$store.state.loginUser.userFlag == '0'){
     if(this.$store.state.loginUser.userId == '1'){
      this.deleteflat = false
    }
  },
  methods: {
    // 操作类型变化
    opachange(val){
      if(val=='2'){
        // 才填
          this.reassignment =false
          // 校验改变
          this.roamrules.character = [
             { required: true, message: '请选择转派角色', trigger: 'change' },
          ]
          this.roamrules.roleId = [
             { required: true, message: '请选择转派用户', trigger: 'change' },
          ]
      }else{
        this.reassignment =true
        // 清空数据
        this.roamformInline.character = ''
        this.roamformInline.roleId = ''
        // 清空转派校验的文字
        this.$refs.roamdialog.clearValidate(['character','roleId'])
         this.roamrules.character = [
             { required: false, message: '请选择转派角色', trigger: 'change' },
          ]
          this.roamrules.roleId = [
             { required: false, message: '请选择转派用户', trigger: 'change' },
          ]
      }
    },
    //下载
    download(data){
      console.log(data)
      this.downloadId = data.fileId
    },
    deleteupload (index) {
      this.fileInfoList[index].fileDesc = ''
      this.fileInfoList[index].fileSize = ''
      this.fileInfoList[index].remark = ''
      this.fileInfoList[index].filePath = ''
      this.fileInfoList[index].newName = ''
    },
    characterchange (val) {
      this.roamformInline.roleId = ''
      if (val === '') {
        this.roleIdoptions = []
      } else {
        this.$http({
          url: `/api//system/userRole/selectRoleUserList/${val}`,
          method: 'get',
        }).then(res => {
          this.roleIdoptions = res.data.data
        })
      }
    },
    getselect () {
      this.$http({
        url: `/api/system/userRole/selectRoleList`,
        method: 'get',
      }).then(res => {
        this.characteroptions = res.data.data
      })
    },
    uploadbtn (data, index) {
      console.log(data)
      this.uploaddialogVisible = true
      this.indexid = index
      this.uploadform.docName = data.docName
      this.uploadform.fileDesc = data.fileDesc
      this.uploadform.remark = data.remark
      this.uploadform.newName = data.newName
    },
    submit () {
      console.log(this.roamformInline)
      let data = {
        operOpinions: this.roamformInline.operOpinions,
        operType: this.roamformInline.operType,
        orderNo: this.orderNo,
        // 用户id
        roleId: this.roamformInline.roleId,
        // 类型转派来源，0：工单 1：资源 2：开发者认证
        source:'2'
      }
      let putdata = {
        orderNo: this.orderNo,
        orderType: this.application.orderType,
        orderDesc: this.application.orderDesc,
        priority: this.application.priority,
        endDate: this.application.endDate,

      }
      this.fileInfoList.forEach(item => {
        // delete item.fileId
        delete item.params
        delete item.orderNo
      })
      putdata.fileInfoList = this.fileInfoList
      console.log(putdata, '我啊哈哈哈')
      console.log(this.$refs['roamdialog'])
      if (this.$refs['roamdialog'] == undefined) {
        this.$http({
          url:  '/api/work/order/fileinfo/update/',
          method: 'post',
          data: putdata
        }).then(res => {
          this.$router.push('/devWorkOrderManagement')
        })
      } else {
        this.$refs['roamdialog'].validate((valid) => {
          if (valid) {
            this.$http({
              url: '/api/work/track',
              method: 'post',
              data: data
            }).then(res => {
              if (res.data.code == 200) {
                // this.$refs['createDialog'].resetFields()
                // 修改信息的接口
               

              } else {
                // this.$message.error('流转失败')
              }
            })
            // 修改的
             this.$http({
                  url: '/api/work/order/fileinfo/update/',
                  method: 'post',
                  data: putdata
                }).then(res => {
                  console.log(res)
                  this.$router.push('/devWorkOrderManagement')
                })
          }
        })
      }


    },
    getdata () {
      this.$http({
        url: `/api/work/order/fileinfo/${this.orderNo}`,
        method: 'get'
      }).then(res => {
        console.log(res, '0000')
        this.application = res.data.data
        this.fileInfoList = res.data.data.fileInfoList
        this.tableData2 = res.data.data.workOrderTrackList
        this.operation = res.data.data.workStatus
        // this.
        // 判断是不是创件人和代办状态
        if(res.data.data.workStatus=='2'&&this.$store.state.loginUser.userId == res.data.data.creator){
          this.operationFlat = true
        }

      })
    },
    uploadsub () {
      this.uploaddialogVisible = false
      // this.fileInfoList[this.indexid].docName = this.uploadform.docName
      this.fileInfoList[this.indexid].fileDesc = this.uploadform.fileDesc
      this.fileInfoList[this.indexid].remark = this.uploadform.remark
      if (this.uploadform.fileSize != '') {
        this.fileInfoList[this.indexid].fileSize = this.uploadform.fileSize + 'M'

      }
      this.fileInfoList[this.indexid].newName = this.uploadform.newName
      this.fileInfoList[this.indexid].filePath = this.uploadform.filePath
    },
    batchdelete () {
      console.log(this.$refs.tableref.selection)
      this.$refs.tableref.selection.forEach(item => {
        this.fileInfoList.forEach(ele => {
          if (item.fileId == ele.fileId) {
            ele.fileDesc = ''
            ele.fileSize = ''
            ele.remark = ''
            ele.filePath = ''
            ele.newName = ''
          }
        })
      })
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    uploadsuccess (response, file, fileList) {
      console.log(file)
      this.uploadform.newName = file.name
      this.uploadform.filePath = file.response.path
      // 文件大小
      this.uploadform.fileSize = (file.size / 1024 / 1024).toFixed(2)
    },
  }
}
</script>

<style lang="scss" scoped>
.my-certificate-apply {
  height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .main {
    height: 92%;
    background-color: white;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 20px;
    .title-info {
      position: relative;
      margin: 10px 0 15px;
      &::before {
        position: absolute;
        content: '';
        display: block;
        width: 3px;
        height: 90%;
        background-color: #55aaff;
        left: -8px;
        top: 6%;
      }
    }

    .application-status {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
  }
}
span.success {
  color: #67c23a;
}
.form-item-label {
  display: flex;
  min-width: 60px;
  margin-right: 10px;
  font-size: 14px;
  color: #606266;
  align-items: center;
}
.form-item {
  flex-grow: 1;
  margin-right: 15px;
}
</style>